<template>
	<view class="content">
		<u--form labelPosition="left" labelWidth="65%" :model="model" :rules="rules" ref="uForm">
			<u-form-item class="item" prop="nickName">
				<view class="item-left">昵称</view>
				<view class="item-right">
					<u-input disabledColor="#fff" v-model="model.nickName" border="none" input-align="right"
						placeholder="请填写昵称" />
					<view class="rightIcon">
						<u-icon slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
					</view>
				</view>
			</u-form-item>

			<u-form-item class="item" prop="age">
				<view class="item-left">年龄</view>
				<view class="item-right">
					<u--input type="number" style="pointer-events: none;" disabledColor="#fff" v-model="model.age"
						border="none" input-align="right" placeholder="请填写年龄"></u--input>
					<view class="rightIcon">
						<u-icon slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
					</view>
				</view>
			</u-form-item>

			<u-form-item class="item" @click="showSex = true;" :flexAble="false" prop="sex">
				<view class="item-left">性别</view>
				<view class="item-right">
					<u--input class="right-pic" v-model="model.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none" input-align="right"></u--input>
					<view class="rightIcon">
						<u-icon slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
					</view>
				</view>
			</u-form-item>

			<u-form-item class="item" @click="handleImg" :flexAble="false" className="img-formItem">
				<view class="item-left">上传人脸照片</view>
				<view class="item-right">
					<image class="right-pic" :src="model.myPic" />
					<view class="rightIcon">
						<u-icon slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
					</view>
				</view>
			</u-form-item>
			<view class="sub">
				<button @click="handleSave">保存</button>
			</view>
		</u--form>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		request,
		requestData
	} from '@/utils/http.js';
	export default {
		data() {
			return {
				model: {
					nickName: '',
					age: '',
					sex: '',
					myPic: uni.getStorageSync('myPic') || require('@/static/img/my-pic-default.png'),
				},
				rules: {
					'nickName': {
						type: 'string',
						required: true,
						message: '请填写姓名/昵称',
						trigger: ['blur', 'change']
					},
					'age': {
						type: 'number',
						required: true,
						trigger: ['blur', 'change'],
						asyncValidator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请填写年龄'))
							} else if (isNaN(Number(value))) {
								callback(new Error('年龄必须是数字类型，请重新填写'))
							} else {
								callback()
							}
						},
					},
				},
				actions: [{
						name: '男',
						value: 1,
					},
					{
						name: '女',
						value: 2
					},
				],
				showSex: false,
			}
		},
		onLaunch: function() {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow: function() {
			this.tips = getApp().globalData.text
			console.log(getApp().globalData.text);

		},
		methods: {
			// 表单提交
			handleSave() {
				if (uni.getStorageSync('mobile_binded') == 0) {
					uni.showToast({
						title: '请先绑定手机号',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/loginPhone/loginPhone',
						})
					}, 1000)
				} else {
					this.$refs.uForm.validate().then(res => {
						let sexLabel = this.model.sex;
						let gender = ''
						if (sexLabel == '男') {
							gender = 1
						} else if (sexLabel == '女') {
							gender = 2
						} else if (sex == '未知') {
							gender = 0
						}
						request('/user/carried/register', {
							nick_name: this.model.nickName,
							age: Number(this.model.age),
							gender,
						}).then(res => {
							if (res.code == 0) {
								uni.$u.toast('创建成功')
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							} else {
								uni.$u.toast('创建失败')
							}
						}).catch(err => {
							console.log(err)
						})
					}).catch(errors => {
						console.log(errors)
						uni.$u.toast('请检查填写的内容是否符合规则')
					})
				}
			},

			//选择性别
			sexSelect(e) {
				console.log(e);
				this.model.sex = e.name
				this.$refs.uForm.validateField('sex')
			},
		},
	}
</script>

<style lang="scss" scoped>
	/* 更改form样式
	https://gitcode.csdn.net/65ec454d1a836825ed795f5b.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6NTIxMDQ4LCJleHAiOjE3MjQwNTQxMzUsImlhdCI6MTcyMzQ0OTMzNSwidXNlcm5hbWUiOiJxcV8zMzMzMjE4NCJ9.oGTHEemmtk-LQyb8Q8wT6vnYMGpHcw0g2D1P3RXuFXE
	 */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.vue-ref {
		width: 100%;
	}

	.u-form {
		width: 100%;
		height: 100vh;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	::v-deep .u-form-item {
		width: 100% !important;
		height: 100% !important;
		box-sizing: border-box !important;
		font-size: 32rpx !important;
		// background: red !important;
	}

	::v-deep .u-form .u-form-item__body__right {
		flex-direction: row !important;
	}

	::v-deep .u-form-item__body__right__content__slot {
		flex-direction: row !important;
		width: 100%;
	}

	::v-deep .u-form-item__body__right_no_flex {
		width: 100% !important;
		height: 100% !important;
	}

	::v-deep .u-form-item__body {
		padding: 0 !important;
		height: 100% !important;
	}

	.item {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 100rpx;
		background: #fff;
		border-bottom: 1px solid #f6f6f6;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.item-left {
			width: 30%;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
		}

		.item-right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
	}

	.right-txt {}

	.rightIcon {
		margin-left: 20rpx;
	}

	.right-pic {
		width: 60rpx;
		height: 60rpx;
	}

	.avatarUrl {
		border-radius: 50%;
	}

	.avatar-wrapper {
		padding: 0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
	}

	.avatar {
		display: block;
		width: 100%;
		height: 100%;
	}

	.container {
		display: flex;
	}

	.u-form-item__body__right__message {
		margin-left: 0;
	}

	::v-deep .u-button--info {
		background: $global-color-golden !important;
		width: 130rpx !important;
		z-index: 999;
		color: #fff !important;
		// border-radius: 20rpx !important;
	}

	.phone-box {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.sub {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.sub button {
		border: none;
		width: 60%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $global-color-golden;
		border-radius: 40rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 400;
	}
</style>